<template>
	<view>
		<image class="bgview" :style="'height: '+(windowHeight-10)+'px'"
			src="https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my/bg-img.jpg"></image>

		<view class="title_layout">
			<view class="row" style="margin-top: 40rpx;">
				<text class="text-1">卡券名称</text>
				<text class="text-2">{{data.couponName}}</text>
			</view>
			<view class="row">
				<text class="text-1">卡券状态</text>
				<text class="text-2" v-if="data.couponStatus=='2'">已过期</text>
				<text class="text-3" v-else-if="data.couponStatus=='1'&&data.couponIsused==0">可使用</text>
				<text class="text-2" v-else-if="data.couponStatus=='1'&&data.couponIsused==1">{{data.couponIsusedText}}</text>
				
				<text class="text-2" v-else>{{data.couponStatusText}}</text>
			</view>
			<view class="row">
				<text class="text-1">卡券类型</text>
				<text class="text-2">{{data.couponTypeText}}</text>
			</view>
			<view class="row">
				<text class="text-1">有效期</text>
				<text class="text-2">{{data.takeEffectDate}} - {{data.expiryDate}}</text>
			</view>
			<view class="row">
				<text class="text-1">卡券编号</text>
				<text class="text-2">{{data.couponNo}}</text>
			</view>
			<view class="bigImage-row">
				<text class="text-1">二维码</text>
				<canvas id="qrcode" class="QRcode" @click="bigQrcodeImg" canvas-id="qrcode" style="width: 96px;height:96px;"></canvas>



			</view>
			<view class="bigImage-row">
				<text class="text-1">卡券说明</text>
				<text class="text-2" style="max-width: 400rpx;">{{data.remark}}</text>
			</view>
		</view>



	</view>
</template>

<script>
	const app = getApp();
	const util = require('@/utils/util.js');
	const network = require('@/manager/network-manager.js');
	import uQRCode from "@/utils/uQrcode.js"

	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/indexforbase64.js'
	export default {

		data() {
			return {
				cardCode: '',
				windowHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight,
				couponNo: '',
				data: {},
				qrcodeImg: ''

			}
		},

		onLoad: function(options) {
			var that = this
			that.couponNo = options.couponNo
			that.getUserCouponDetails(this.couponNo)
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: that,
				text: that.couponNo,
				size: 96,
				margin: 2,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				success: res => {
					that.qrcodeImg = res
				}
			})
		},
		methods: {
			//用户查询卡券详情
			getUserCouponDetails: function(couponNo) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_ACTIVITY_CARD_GETMYUSERCOUPONPDETAILS;
				var params = {
					"couponNo": couponNo
				};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						that.data = res.data
						that.data.takeEffectDate = that.data.takeEffectDatetime.substring(0, 4) + "/" + that
							.data.takeEffectDatetime.substring(5, 7) + "/" + that.data.takeEffectDatetime
							.substring(8, 10)
						that.data.expiryDate = that.data.expiryDatetime.substring(0, 4) + "/" + that.data
							.expiryDatetime.substring(5, 7) + "/" + that.data.expiryDatetime.substring(8, 10)
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			getQrcodeImg: function(e) {
				this.qrcodeImg = e
			},
			bigQrcodeImg: function() {
				uni.showLoading({
					title: '预览加载中'
				});
				let _this = this;
				let imgsArray = [];
				base64ToPath(_this.qrcodeImg).then(path => {
					uni.hideLoading();
					imgsArray[0] = path
					uni.previewImage({
						current: 0,
						urls: imgsArray
					})
				})
			}


		}
	}
</script>

<style>
	@import "./myCardDetail.css";
</style>
